<script setup>
import {
    ref,
    computed,
    onMounted,
    toRaw,
    getCurrentInstance,
    watch,
} from "vue";
import { mainStore } from "../store/index";
const { proxy } = getCurrentInstance();
const { $mapevent } = proxy;
import ico_15 from "../assets/topimg/ico_15.png";
import ico_17 from "../assets/topimg/ico_17.png";
import ico_18 from "../assets/topimg/ico_18.png";
import ql from "../assets/topimg/ql.png";
import ico_sn from "../assets/topimg/ico_sn.png";
import ico_b from "../assets/topimg/ico_b.png";
const store = mainStore();
let styleRight = ref(-88)
let layerGisLeft = ref(-280);
let modes = ref(true);
let attractTitle = ref("");
let attractData = ref(null);
let statisticsType = ref([
    {
        url: ico_15,
        aside: `收费站()`,
        invest: null,
    },
    {
        url: ico_17,
        aside: `服务区()`,
        invest: null,
    },
    {
        url: ql,
        aside: `桥梁(10)`,
        invest: null,
    },
    {
        url: ico_sn,
        aside: `交通枢纽()`,
        invest: null,
    },
    {
        url: ico_17,
        aside: `隧道(10)`,
        invest: null,
    },
    {
        url: ico_18,
        aside: `存在问题(10)`,
    },
    {
        url: ico_b,
        aside: `标段`,
        type: 7
    },
]);
let sfzArrys = computed(() => {
    return store.sfzArrys;
});
watch(sfzArrys, (n, o) => {
    statisticsType.value[0].aside = `收费站(${n.length})`;
    statisticsType.value[0].invest = n;
});
let fwqArrys = computed(() => {
    return store.fwqArrys;
});
watch(fwqArrys, (n, o) => {
    statisticsType.value[1].aside = `服务区(${n.length})`;
    statisticsType.value[1].invest = n;
});
let ljArrys = computed(() => {
    return store.ljArrys;
});
watch(ljArrys, (n, o) => {
    statisticsType.value[3].aside = `交通枢纽(${n.length})`;
    statisticsType.value[3].invest = n;
});
onMounted(() => {styleRight.value = 20});
function handleClose() {
    modes.value = false;
    layerGisLeft.value = -280;
}
function attract(item) {
    if (item.type==7) {
        store.changeTendersShow('show',!store.TendersShow.show)
        if (!store.TendersShow.show) {
            store.changeTagEntity(null);
            $mapevent.f_AddPyramid()
        }
        return
    }
    modes.value = true;
    setTimeout(() => {
        layerGisLeft.value = 120;
    }, 300);
    attractTitle.value = item.aside;
    if (item.invest) {
        attractData.value = item.invest;
        console.log(attractData.value);
    }
}
function Buyout(vaite) {
    $mapevent.Zoomto(toRaw(vaite)._position._value);
}
</script>

<template>
    <div id="statistics" :style="{right: `${styleRight}px`}">
        <div
            v-for="(item, index) in statisticsType"
            :key="item.url"
            @click="attract(item)"
        >
            <img :src="item.url" alt="" /><span>{{ item.aside }}</span>
        </div>
    </div>
    <el-dialog
        id="statisticsDialog"
        :style="{ right: `${layerGisLeft}px` }"
        v-model="modes"
        :title="attractTitle"
        draggable
        :close-on-click-modal="false"
        :before-close="handleClose"
    >
        <div
            v-for="vaite in attractData"
            style="color: #fff"
            class="attract"
            @click="Buyout(vaite)"
        >
            <span></span>
            {{ vaite._name }}
        </div>
    </el-dialog>
</template>

<style lang="less">
#statistics {
    position: fixed;
    right: -88px;
    top: 80px;
    z-index: 3;
    transition: right 1s ease-out;
    >div {
        width: 88px;
        height: 40px;
        padding: 14px 0;
        margin-bottom: 8px;
        
        cursor: pointer;
        > img {
            width: 25px;
            display: block;
            margin: auto;
        }
        > span {
            color: #fff;
            font-size: 12px;
            display: block;
            text-align: center;
            margin-top: 6px;
        }
    }
    >div:hover{
        background: url(../assets/topimg/bg.png) no-repeat;
    }
}
#statisticsDialog {
    position: fixed;
    z-index: 2;
    width: 200px;
    height: 40%;
    top: -70px;
    right: 0;
    pointer-events: auto;
    border: 2px solid #006699;
    background-color: #00669957;
    transition: right 0.8s ease-out;
    .el-dialog__headerbtn {
        top: -2px;
    }
    .el-tree-node__content {
        color: #fff;
    }
    .el-tree-node__content:hover {
        background-color: #0066998a;
    }
    .el-dialog__header {
        width: calc(100% - 40px);
        padding: 10px 20px;
        background-color: #0066997c;

        .el-dialog__title {
            color: #fff;
            font-size: 16px;
        }
        .el-icon svg {
            color: #fff;
        }
    }
    .el-dialog__body {
        padding-top: 20px;
        padding-bottom: 0;
        height: calc(100% - 20px - 54px - 20px);
        overflow-y: auto;
    }
    .attract {
        font-size: 14px;
        line-height: 14px;
        padding: 6px;
        position: relative;
        cursor: pointer;
        > span {
            display: block;
            position: absolute;
            top: 10px;
            left: -5px;
            width: 4px;
            height: 4px;
            border-radius: 100%;
            background-color: #fff;
        }
    }
}
</style>
